<template>
	<view class="content">
		<view class="bindtip">风险提示：转拍属于C2C交易，资金不经过平台，平台不会自动扣款，需要您手动自行转账给对方，对方才能收到款项</view>
		<view class="group">
			<view class="list">
				<view class="list_name">收款人姓名</view>
				<view class="list_fr">
					<input type="text" class="listInput" placeholder="请输入真实姓名" v-model="realName" placeholder-class="pladler"/>
				</view>
			</view>
			<view class="list">
				<view class="list_name">开户银行</view>
				<view class="list_fr">
					<input type="text" class="listInput" placeholder="请输入开户银行" v-model="bankName" placeholder-class="pladler"/>
				</view>
			</view>
			<view class="list">
				<view class="list_name">银行卡号</view>
				<view class="list_fr">
					<input type="number" class="listInput" placeholder="请输入银行卡号" v-model="bankNumber" placeholder-class="pladler"/>
				</view>
			</view>
			<view class="list">
				<view class="list_name">银行卡图片</view>
				<view class="list_image">
					<view class="upload">
						<image  :src="image == '' ? dafultImage : image" mode="aspectFit" @click="upload(image)"></image>
						<image v-if="image != ''" class="closeImg" src="/close.png" mode="" @click="cancel"></image>
					</view>
				</view>
			</view>
			
			<view class="list">
				<view class="list_name">验证手机</view>
				<view class="list_code">
					<view class="reg_fl">
						<input type="number" placeholder="请输入验证码" class="input_code" placeholder-class="place"  v-model="code" />
					</view>
					<view class="reg_fr">
						<button class="phone_code " @tap="getCode" :disabled="disabled">{{timeText}}</button>
					</view>
					
				</view>
			</view>
			
		</view>
		
		<view class="bottom">
			<view class="submit" @click="getSave">保存</view>
		</view>
	</view>
</template>

<script>
	import urlConfig from '../../../../../common/api/config.js'
	
	export default {
		data() {
			return { 
				realName:'', // 银行名称
				bankName:'',  // 银行名称
				bankNumber:'', // 银行卡号
				code:'', // 验证码   
				disabled:false,
				timeText:'获取验证码',
				countdown:60,
				image:'' ,// 银行卡照片
				dafultImage:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/upload.png',
				users:{},
				id:0
			}
		},
		onLoad(options) {
			console.log("111111111",this.api)
			
			if (Object.keys(options).length != 0) {
				this.id = options.id;
				console.log(this.id,"---")
			}
			this.getUserInfo()
		},
		methods: {
			// 倒计时
			setTime:function(){
				var that = this;
				var time = that.countdown;
				if(time == 0){
					that.timeText = "获取验证码";
					that.disabled = false;
					time = 60; 
					that.countdown = time;
					return
				}else{
					that.disabled = true
					var timea = time-1;
					//console.log(timea)
					that.countdown = timea
					that.timeText = '等待'+'('+timea+')秒';
				}
				setTimeout(function(){
					that.setTime()
				},1000)
			},
			// 获取验证码
			getCode: function () {
				let that = this;
				let phone = that.users.phone;
				that.api.getVerifyCode({
					phone: phone,
					type:'bind'
				}).then(res => {
					that.tui.toast(res.msg)
					that.setTime();
				})
				
			},
			// 保存
			getSave: function () {
				let that = this;
				if (that.realName == '') {
					that.tui.toast('请输入真实姓名');
					return
				} else if (that.bankName == '') {
					that.tui.toast('请输入开户行名称');
					return
				} else if (that.bankNumber == '') {
					that.tui.toast('请输入银行卡号');
					return
				} else if (that.image == '') {
					that.tui.toast('请上传银行卡照片');
					return
				} else if (that.code == '') {
					that.tui.toast('请输入验证码');
					return
				}
				that.api.userBindBank({
					bankName:that.bankName,
					bankNumber:that.bankNumber,
					image:that.image,
					id:that.id,
					code:that.code,
					realName:that.realName
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data);
					setTimeout(function () {
						that.cacheHelper.updateUserInfo();
						uni.$emit('login',{msg: '用户信息更新'})
					},500)
					setTimeout(function () {
						uni.navigateBack({
							delta: 1
						});
					},1500)
				})
				
				
			},
			upload: function (image) {
				let that = this;
				if (image == '') {
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album','camera'], //从相册选择
					    success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.uploadFile({
								url: urlConfig + 'uploadService', //接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								success: (res) => {
									console.log(res); 
									var data = JSON.parse(res.data);
									console.log(data,"======")
									that.image = data.data.data
								}
							});
						}
					});	
				} else {
					that.tui.toast('银行卡照片已上传');
					return
				}
			},
			// 删除
			cancel: function () {
				this.image = '';
			},
			// 获取我的信息
			getUserInfo: function () {
				this.api.getUserInfo().then(res => {
					console.log(res)
					this.users = res.data;
				})
			}  
			
			
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #212121;
		font-family: 'PingFang SC';
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.bindtip {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		background: #F5F5F5;
		font-size: 26rpx;
		color: #E42221;
	}
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 0;
			line-height: 80rpx;
			border-bottom: 2rpx solid #F5F5F5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list_fl {
				width: 200rpx;
				box-sizing: border-box;
			}
			.list_fr {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				.pladler {
					font-size: 30rpx;
					color: #666666;
				}
				.listInput {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
			.list_code {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.reg_fr {
					width: 195rpx;
					box-sizing: border-box;
					margin: 0;
					.phone_code {
						width: 100%;
						font-size: 30rpx;
						height: 70rpx;
						line-height: 70rpx;
						color: #E42221;
						background: none;
						padding: 0;
					}
				}
				.reg_fl {
					width: calc(100% - 195rpx);
					box-sizing: border-box;
					padding-right: 5rpx;
					.input {
						width: 100%;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 36rpx;
					}
					.place {
						font-size: 30rpx;
						color: #999999;
					}
				}
			}
			.list_image {
				width: calc(100% - 200rpx);
				box-sizing: border-box;
				.upload {
					width: 140rpx;
					height: 140rpx;
					position: relative;
					image {
						width: 100%;
						height: 100%;
					}
					.closeImg {
						width: 46rpx;
						height: 46rpx;
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						z-index: 10;
					}
				}
			}
			
		}
		
	}
	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 30rpx 50rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 66;
		.submit {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #E42221;
			border-radius: 8rpx;
			line-height: 94rpx;
		}
	}

</style>
